<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码生成器测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            line-height: 1.6;
            width: 700px;
            height: 500px;
            overflow: hidden;
        }
        
        .container {
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        
        .main-content {
            display: flex;
            flex: 1;
            min-height: 400px;
        }
        
        .input-section {
            flex: 2;
            padding: 20px;
            border-right: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
            background: #f9f9f9;
        }
        
        .input-section h3 {
            font-size: 14px;
            color: #555;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        #textInput {
            flex: 1;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 12px;
            font-size: 13px;
            resize: none;
            outline: none;
            min-height: 200px;
        }
        
        .settings-section {
            width: 160px;
            padding: 20px 15px;
            border-right: 1px solid #e0e0e0;
            background: #f8f9fa;
        }
        
        .settings-section h3 {
            font-size: 14px;
            color: #555;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .setting-item {
            margin-bottom: 15px;
        }
        
        .setting-item label {
            display: block;
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }
        
        .setting-item select {
            width: 100%;
            padding: 6px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .qrcode-section {
            flex: 2;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #fff;
        }
        
        .qrcode-section h3 {
            font-size: 14px;
            color: #555;
            margin-bottom: 15px;
            font-weight: 600;
            align-self: flex-start;
        }
        
        .qrcode-container {
            border: 2px dashed #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            background: #fafafa;
            margin-bottom: 15px;
        }
        
        .placeholder {
            width: 200px;
            height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #999;
            text-align: center;
        }
        
        .placeholder-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }
        
        .actions {
            display: flex;
            gap: 10px;
        }
        
        .download-btn, .copy-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            color: white;
        }
        
        .download-btn {
            background: #28a745;
        }
        
        .copy-btn {
            background: #17a2b8;
        }
        
        .footer {
            padding: 10px 20px;
            background: #f8f9fa;
            border-top: 1px solid #e0e0e0;
            text-align: center;
        }
        
        .footer small {
            color: #666;
            font-size: 11px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 标题栏 -->
        <div class="header">
            <h1>二维码生成器</h1>
        </div>
        
        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 左侧：文本输入区域 -->
            <div class="input-section">
                <h3>输入内容</h3>
                <textarea 
                    id="textInput" 
                    placeholder="请输入要生成二维码的内容...\n支持文本、网址、联系方式等"
                ></textarea>
                <div style="margin-top: 8px; font-size: 12px; color: #666; text-align: right;">
                    <span id="charCount">0</span> 字符
                </div>
            </div>
            
            <!-- 中间：参数设置区域 -->
            <div class="settings-section">
                <h3>参数设置</h3>
                
                <div class="setting-item">
                    <label for="sizeInput">尺寸大小:</label>
                    <select id="sizeInput">
                        <option value="150">150x150</option>
                        <option value="200" selected>200x200</option>
                        <option value="250">250x250</option>
                        <option value="300">300x300</option>
                    </select>
                </div>
                
                <div class="setting-item">
                    <label for="errorLevel">容错级别:</label>
                    <select id="errorLevel">
                        <option value="L">L (低)</option>
                        <option value="M" selected>M (中)</option>
                        <option value="Q">Q (高)</option>
                        <option value="H">H (最高)</option>
                    </select>
                </div>
                
                <div class="setting-item">
                    <label for="foregroundColor">前景色:</label>
                    <input type="color" id="foregroundColor" value="#000000" style="width: 100%; height: 32px;">
                </div>
                
                <div class="setting-item">
                    <label for="backgroundColor">背景色:</label>
                    <input type="color" id="backgroundColor" value="#ffffff" style="width: 100%; height: 32px;">
                </div>
                
                <button id="resetBtn" style="width: 100%; padding: 8px; background: #6c757d; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; margin-top: 10px;">重置参数</button>
            </div>
            
            <!-- 右侧：二维码展示区域 -->
            <div class="qrcode-section">
                <h3>二维码预览</h3>
                <div class="qrcode-container">
                    <canvas id="qrcode" width="200" height="200" style="display: none;"></canvas>
                    <div id="placeholder" class="placeholder">
                        <div class="placeholder-icon">📱</div>
                        <p>请在左侧输入内容<br>自动生成二维码</p>
                    </div>
                </div>
                
                <div class="actions">
                    <button id="downloadBtn" class="download-btn" disabled>
                        📥 下载PNG
                    </button>
                    <button id="copyBtn" class="copy-btn" disabled>
                        📋 复制图片
                    </button>
                </div>
                
                <div id="qrcodeInfo" style="display: none; text-align: center; color: #666; font-size: 11px; margin-top: 10px;">
                    <small>尺寸: <span id="infoSize">-</span> | 容错: <span id="infoError">-</span></small>
                </div>
            </div>
        </div>
        
        <!-- 底部信息 -->
        <div class="footer">
            <small>支持文本、网址、邮箱、电话等内容 | 生成的二维码可用于微信、支付宝等扫码</small>
        </div>
    </div>
    
    <script>
        // 简单的测试脚本
        document.addEventListener('DOMContentLoaded', function() {
            const textInput = document.getElementById('textInput');
            const charCount = document.getElementById('charCount');
            
            textInput.addEventListener('input', function() {
                charCount.textContent = textInput.value.length;
            });
            
            // 测试输入一些内容
            textInput.value = '测试二维码生成';
            charCount.textContent = textInput.value.length;
            
            console.log('测试页面加载完成');
        });
    </script>
</body>
</html>